<template>
  <el-dialog
      :title="data.title"
      v-model="data.visible"
      width="40%"
      destroy-on-close
  >
    <el-form :model="data.tenant" label-position="left" :rules="data.rules" ref="data.tenant" size="small">
      <el-form-item prop="name" label="租户名称" label-width="110px">
        <el-input type="text" placeholder="请输入" :disabled="data.disable" v-model="data.tenant.name"/>
      </el-form-item>
      <el-form-item prop="shortName" label="租户简称" label-width="110px">
        <el-input type="tel" placeholder="请输入" :disabled="data.disable" v-model="data.tenant.shortName"/>
      </el-form-item>
      <el-form-item prop="company" label="所属公司" label-width="110px">
        <el-input type="text" placeholder="请输入" v-model="data.tenant.company"/>
      </el-form-item>
      <el-form-item prop="companyShortName" label="公司简称" label-width="110px">
        <el-input type="email" placeholder="请输入" v-model="data.tenant.companyShortName"/>
      </el-form-item>
      <el-row>
        <el-form-item prop="contactAName" label="主联系人姓名" label-width="110px">
          <el-input type="text" placeholder="请输入" v-model="data.tenant.contactAName"></el-input>
        </el-form-item>
        <el-form-item prop="contactAMobile">
          <el-input type="tel" placeholder="请输入联系人手机号" v-model="data.tenant.contactAMobile"></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item prop="contactBName" label="备联系人姓名" label-width="110px">
          <el-input type="text" placeholder="请输入" v-model="data.tenant.contactBName"></el-input>
        </el-form-item>
        <el-form-item prop="contactBMobile">
          <el-input type="tel" placeholder="请输入联系人手机号" v-model="data.tenant.contactBMobile"></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item prop="description" label="备注" label-width="110px">
          <el-input type="textarea" rowcount="2" colcount="50" placeholder="请输入" v-model="data.tenant.description"/>
        </el-form-item>
      </el-row>
    </el-form>

    <template #footer>
    <span class="dialog-footer">
      <el-button @click="resetDialog('data.tenant')">取 消</el-button>
      <el-button type="primary" @click="submitCli('data.tenant')">确 定</el-button>
    </span>
    </template>
  </el-dialog>
</template>

<script>
import {getCurrentInstance, reactive, ref} from "vue";
import {ElMessage} from "element-plus";

export default {
  name: "TenantDialog",
  //vue3新特性，，这样写要不然props获取不到
  setup() {
    const {proxy} = getCurrentInstance()
    const data = reactive({
      visible: false,
      tenant: reactive({
        id: ref(null),
        name: ref(''),
        shortName: ref(''),
        company: ref(''),
        createdBy: ref(''),
        createdTime: ref(''),
        updatedBy: ref(''),
        updatedTime: ref(''),
        description: ref(''),
        status: ref(1),
        contactAName: ref(''),
        contactAMobile: ref(''),
        contactBName: ref(''),
        contactBMobile: ref(''),
        companyShortName: ref('')
      }),
      title: ref("新增"),
      disable: ref(false),
      rules: {
        name: [
          {required: true, message: '请输入租户名称', trigger: 'blur'}
        ],
        shortName: [
          {required: true, message: '请输入租户简称', trigger: 'blur'}
        ],
        contactAName: [
          {required: true, message: '请输入主联系人姓名', trigger: 'blur'}
        ],
        contactAMobile: [
          {required: true, message: '请输入主联系人手机号', trigger: 'blur'}
        ]
      }
    })

    const setTenantData = (params) => {
      console.log('------', params)
      if (params == null) {
        proxy.data.tenant = JSON.parse('{}')
        proxy.data.title = '新增租户'
        proxy.data.disable = false
      } else {
        proxy.data.tenant = JSON.parse(JSON.stringify(params))
        proxy.data.title = '更新用户'
        proxy.data.disable = true
      }
      proxy.data.visible = true
    }

    const resetDialog = (params) => {
      proxy.$refs[params].resetFields()
      proxy.data.visible = false
    }

    const submitCli = (formName) => {
      proxy.$refs[formName].validate((valid) => {
        if (!valid) {
          return;
        }
      })
      console.log(proxy.data.tenant.id)
      let tmp = proxy.data.tenant.id
      if (!tmp || typeof (tmp) == "undefined" || tmp === 0) {
        addTenant()
      } else {
        updateTenant()
      }
    }

    function updateTenant() {
      proxy.$service.updateTenant(proxy.data.tenant).then(result => {
        if (result.res.code === 0) {
          ElMessage.success({
            message: result.res.msg,
            type: 'success',
          })
          proxy.$parent.getTenantList()
          proxy.resetDialog('data.tenant')
        } else {
          ElMessage.error(result.res.msg)
        }
      })
    }

    function addTenant() {
      proxy.$service.insertTenant(proxy.data.tenant).then(result => {
        if (result.res.code === 0) {
          ElMessage.success({
            message: result.res.msg,
            type: 'success',
          })
          proxy.$parent.getTenantList()
          proxy.resetDialog('data.tenant')
        } else {
          ElMessage.error(result.res.msg)
        }
      })
    }


    return {data, resetDialog, submitCli, setTenantData}
  }
}
</script>

<style scoped>

</style>